import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './Questionnaire.css';
import {input, Radio, Button,notification, Modal} from 'antd';
import $ from 'jquery';
const confirm = Modal.confirm;

const url = 'http://duodao.chende.top';

// RadioGroup和options1-4是单选框
// 单选框部分开始
const RadioGroup = Radio.Group;
const options1 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
const options2 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
const options3 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
const options4 = [
    {label: '是', value: '1'},
    {label: '否', value: '0'},
];
// 单选框部分结束
export default class Quset extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // value1-4是四个单选框
            value1: '0',
            value2: '0',
            value3: '0',
            value4: '0',
            // ajax传值
            data:[],
            yuanliao1:[
                '如：石灰石',
                '',
                '',
                '',
                '',
                '',
                '如：原煤',
            ],
            xiaohao1:[],
            yuanliao2:[
                '如：熟料',
                '天然石膏',
                '脱硫石膏',
            ],
            xiaohao2:[],
            shuzhi:[],
            paifang:[],
            chucheng:[],
            qingkuang:[],

        };
    }

    // onChange1-4是单选框的四个函数
    // 单选函数开始
    onChange1 = (e) => {
        console.log('radio1 checked', e.target.value);
        this.setState({
            value1: e.target.value,
        });
    }
    onChange2 = (e) => {
        console.log('radio2 checked', e.target.value);
        this.setState({
            value2: e.target.value,
        });
    }
    onChange3 = (e) => {
        console.log('radio3 checked', e.target.value);
        this.setState({
            value3: e.target.value,
        });
    }
    onChange4 = (e) => {
        console.log('radio4 checked', e.target.value);
        this.setState({
            value4: e.target.value,
        });
    }
    // 单选函数结束
    //ajax传值开始
    handlechange1=(event,i)=> {
        let newdata = this.state.data;
        newdata[i]=event.target.value;
        this.setState({
            data: newdata,
        });
        console.log(newdata);
    }
    handlechange2=(event,i)=> {
        let newdata = this.state.yuanliao1;
        newdata[i]=event.target.value;
        this.setState({
            yuanliao1: newdata,
        });
        console.log(newdata);
    }
    handlechange3=(event,i)=> {
        let newdata = this.state.xiaohao1;
        newdata[i]=event.target.value;
        this.setState({
            xiaohao1: newdata,
        });
        console.log(newdata);
    }
    handlechange4=(event,i)=> {
        let newdata = this.state.yuanliao2;
        newdata[i]=event.target.value;
        this.setState({
            yuanliao2: newdata,
        });
        console.log(newdata);
    }
    handlechange5=(event,i)=> {
        let newdata = this.state.xiaohao2;
        newdata[i]=event.target.value;
        this.setState({
            xiaohao2: newdata,
        });
        console.log(newdata);
    }
    //数值
    handlechange6=(event,i)=> {
        let newdata = this.state.shuzhi;
        newdata[i]=event.target.value;
        this.setState({
            shuzhi: newdata,
        });
        console.log(newdata);
    }
    //排放
    handlechange7=(event,i)=> {
        let newdata = this.state.paifang;
        newdata[i]=event.target.value;
        this.setState({
            paifang: newdata,
        });
        console.log(newdata);
    }
    //除尘
    handlechange8=(event,i)=> {
        let newdata = this.state.chucheng;
        newdata[i]=event.target.value;
        this.setState({
            chucheng: newdata,
        });
        console.log(newdata);
    }
    //情况
    handlechange9=(event,i)=> {
        let newdata = this.state.qingkuang;
        newdata[i]=event.target.value;
        this.setState({
            qingkuang: newdata,
        });
        console.log(newdata);
    }
    handleSubmit(event) {
        event.preventDefault();
        // console.log(this.refs.ylmc1.value);
        var formData = new FormData($("#form-add")[0]);
          confirm({
            title: '确认提交调研表?',
            content: '提交后将上传至数据库，请核查数据后提交',
            onOk() {
              console.log('提交');
              fetch(url+"/questionnaire_diaoyan/add", {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(formData), // data can be `string` or {object}!
            headers: new Headers({
              'Content-Type': 'application/json'
            })
          }).then(res => res.json())
          .catch(error => console.error('Error:', error))
          .then(response => console.log('Success:', response));
            },
            onCancel() {
              console.log('取消');
            },
          });
        // $.ajax({
        //     type: 'post',
        //     url : "/addCase",
        //     data: formData ,
        //     cache: false,
        //     processData: false,
        //     contentType: false,
        //     success: function (data) {
        //         if (data.status == "1") {
        //             alert("上传成功！"+data);
        //         }
        //         if (data.status == "error") {
        //             alert(data.msg);
        //         }

        //     }
        // });
    }
    // ajax传值结束
    buttonFunc()
    {
        console.log(this.refs.ylmc1.value)
    }

    render() {
        //定义input的value数组
        const {
            data,
            yuanliao1,
            xiaohao1,
            yuanliao2,
            xiaohao2,
            shuzhi,
            paifang,
            chucheng,
            qingkuang,
        } = this.state;
        return (
            <form id="form-add" onSubmit={this.handleSubmit}>
                <div className="first">
                    <h2 style={{textAlign: 'center'}}>2015年水泥企业信息调研表</h2><br/>
                    <table className="table5">
                        <th>企业名称：</th>
                        <td style={{width: '26%'}}>
                            <input placeholder="请输入企业名称"  ref="comp_name"/>
                        </td>
                        <th>生产线名称：</th>
                        <td style={{width: '14%'}}>
                            <input placeholder="请输入生产线名称" value={data[1]} onChange={event => {this.handlechange1(event,1)}} />

                        </td>
                        <th>生产线设计规模：</th>
                        <td>
                            <input placeholder="请输入生产设计规模" value={data[2]} onChange={event => {this.handlechange1(event,2)}} />
                        </td>
                        <th>年运转天数：</th>
                        <td>
                            <input placeholder="请输入年运转天数" value={data[3]} onChange={event => {this.handlechange1(event,3)}}/>
                        </td>
                    </table>
                    <table className="table6">
                        <tr>
                            <th>企业所在地址：</th>
                            <td style={{width: '48%'}}>
                                <input placeholder="请输入企业所在地址" value={data[4]} onChange={event => {this.handlechange1(event,4)}}/>
                            </td>
                            <th>填表联系人：</th>
                            <td>
                                <input placeholder="请输入填表联系人" value={data[5]} onChange={event => {this.handlechange1(event,5)}} />
                            </td>
                            <th>联系电话：</th>
                            <td>
                                <input placeholder="请输入联系电话" value={data[6]} oonChange={event => {this.handlechange1(event,6)}}/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div className="second">
                    <table border="3" className="table1">
                        <tr>
                            <th rowSpan='8' style={{width: '2%'}}>资<br/>源<br/>消<br/>耗</th>
                            <th rowSpan='2' style={{width: 40}}>类别</th>
                            <th colSpan='6'>熟料烧成用原材料（含替代原料）</th>
                            <th colSpan='3'>燃料(含替代燃料)</th>
                            <th rowSpan='3' style={{width: '5%'}}>熟料<br/>产量</th>
                        </tr>
                        <tr>
                            <td>原料1</td>
                            <td>原料2</td>
                            <td>原料3</td>
                            <td>原料4</td>
                            <td>原料5</td>
                            <td>原料6</td>
                            <td>燃料1</td>
                            <td>燃料2</td>
                            <td>燃料3</td>
                        </tr>
                        <tr>
                            <th>原材料名称</th>
                            <td><input style={{border:'none'}} ref="ylmc1" placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[1]} onChange={event => {this.handlechange2(event,1)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[2]} onChange={event => {this.handlechange2(event,2)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[3]} onChange={event => {this.handlechange2(event,3)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[4]} onChange={event => {this.handlechange2(event,4)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[5]} onChange={event => {this.handlechange2(event,5)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[6]} onChange={event => {this.handlechange2(event,6)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[7]} onChange={event => {this.handlechange2(event,7)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao1[8]} onChange={event => {this.handlechange2(event,8)}} placeholder="请输入原料名称"/></td>
                        </tr>
                        <tr>
                            <th>消耗情况，万吨/年</th>
                            <td><input value={xiaohao1[0]} onChange={event => {this.handlechange3(event,0)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[1]} onChange={event => {this.handlechange3(event,1)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[2]} onChange={event => {this.handlechange3(event,2)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[3]} onChange={event => {this.handlechange3(event,3)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[4]} onChange={event => {this.handlechange3(event,4)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[5]} onChange={event => {this.handlechange3(event,5)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[6]} onChange={event => {this.handlechange3(event,6)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[7]} onChange={event => {this.handlechange3(event,7)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[8]} onChange={event => {this.handlechange3(event,8)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao1[9]} onChange={event => {this.handlechange3(event,9)}} placeholder="请输入"/></td>
                        </tr>
                        <tr>
                            <th rowSpan='2'>类别</th>
                            <th colSpan='9'>水泥制成用原材料（含替代原料）</th>
                            <th rowSpan='3'>水泥<br/>产量</th>
                        </tr>
                        <tr>
                            <td>原料1</td>
                            <td>原料2</td>
                            <td>原料3</td>
                            <td>原料4</td>
                            <td>原料5</td>
                            <td>原料6</td>
                            <td>原料7</td>
                            <td>原料8</td>
                            <td>原料9</td>
                        </tr>
                        <tr>
                            <th>原材料名称</th>
                            <td><input value={yuanliao2[0]} onChange={event => {this.handlechange4(event,0)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[1]} onChange={event => {this.handlechange4(event,1)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[2]} onChange={event => {this.handlechange4(event,2)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[3]} onChange={event => {this.handlechange4(event,3)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[4]} onChange={event => {this.handlechange4(event,4)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[5]} onChange={event => {this.handlechange4(event,5)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[6]} onChange={event => {this.handlechange4(event,6)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[7]} onChange={event => {this.handlechange4(event,7)}} placeholder="请输入原料名称"/></td>
                            <td><input value={yuanliao2[8]} onChange={event => {this.handlechange4(event,8)}} placeholder="请输入原料名称"/></td>
                        </tr>
                        <tr>
                            <th>消耗情况，万吨/年</th>
                            <td><input value={xiaohao2[0]} onChange={event => {this.handlechange5(event,0)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[1]} onChange={event => {this.handlechange5(event,1)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[2]} onChange={event => {this.handlechange5(event,2)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[3]} onChange={event => {this.handlechange5(event,3)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[4]} onChange={event => {this.handlechange5(event,4)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[5]} onChange={event => {this.handlechange5(event,5)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[6]} onChange={event => {this.handlechange5(event,6)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[7]} onChange={event => {this.handlechange5(event,7)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[8]} onChange={event => {this.handlechange5(event,8)}} placeholder="请输入消耗情况"/></td>
                            <td><input value={xiaohao2[9]} onChange={event => {this.handlechange5(event,9)}} placeholder="请输入"/></td>
                        </tr>
                    </table>
                    <table border="3" className="table2">
                        <tr>
                            <th rowSpan='3'>能源消耗</th>
                            <th>项目</th>
                            <th>生料粉磨<br/>工段电耗</th>
                            <th>可比熟料<br/>综合煤耗</th>
                            <th>可比熟料<br/>综合电耗</th>
                            <th>可比熟料<br/>综合能耗</th>
                            <th>可比水泥<br/>综合电耗</th>
                            <th>可比水泥<br/>综合能耗</th>
                            <th>单位熟料<br/>余热发电量</th>
                        </tr>
                        <tr>
                            <th>单位</th>
                            <td>kWh/t</td>
                            <td>kgce/t</td>
                            <td>kWh/t</td>
                            <td>kgce/t</td>
                            <td>kWh/t</td>
                            <td>kgce/t</td>
                            <td>kWh/t</td>
                        </tr>
                        <tr>
                            <th>数值</th>
                            <td><input value={shuzhi[0]} onChange={event => {this.handlechange6(event,0)}} placeholder="请输入数值"/></td>
                            <td><input value={shuzhi[1]} onChange={event => {this.handlechange6(event,1)}} placeholder="请输入数值"/></td>
                            <td><input value={shuzhi[2]} onChange={event => {this.handlechange6(event,2)}} placeholder="请输入数值"/></td>
                            <td><input value={shuzhi[3]} onChange={event => {this.handlechange6(event,3)}} placeholder="请输入数值"/></td>
                            <td><input value={shuzhi[4]} onChange={event => {this.handlechange6(event,4)}} placeholder="请输入数值"/></td>
                            <td><input value={shuzhi[5]} onChange={event => {this.handlechange6(event,5)}} placeholder="请输入数值"/></td>
                            <td><input value={shuzhi[6]} onChange={event => {this.handlechange6(event,6)}} placeholder="请输入数值"/></td>
                        </tr>
                    </table>
                    <table border="3" className="table3">
                        <tr>
                            <th rowSpan='5'>废气排放</th>
                            <th rowSpan='2'>项目</th>
                            <th colSpan='5'>颗粒物</th>
                            <th>SO2</th>
                            <th>NOX</th>
                            <th>喷氨</th>
                            <th colSpan='3'>脱硝工艺(划勾)</th>
                        </tr>
                        <tr>
                            <th>窑头</th>
                            <th>窑尾</th>
                            <th>水泥磨</th>
                            <th>煤磨</th>
                            <th>包装机*</th>
                            <th>窑尾</th>
                            <th>窑尾</th>
                            <th>kg/t熟料</th>
                            <th style={{width: '3%'}}>1</th>
                            <th>SNCR</th>
                            <th><RadioGroup options={options1} onChange={this.onChange1} value={this.state.value1}/>
                            </th>
                        </tr>
                        <tr>
                            <th>年排放量，吨/年</th>
                            <td><input value={paifang[0]} onChange={event => {this.handlechange7(event,0)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[1]} onChange={event => {this.handlechange7(event,1)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[2]} onChange={event => {this.handlechange7(event,2)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[3]} onChange={event => {this.handlechange7(event,3)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[4]} onChange={event => {this.handlechange7(event,4)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[5]} onChange={event => {this.handlechange7(event,5)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[6]} onChange={event => {this.handlechange7(event,6)}} placeholder="请输入排放量"/></td>
                            <th rowSpan='2'><input value={paifang[7]} onChange={event => {this.handlechange7(event,7)}} placeholder="请输入排放量"/></th>
                            <th>2</th>
                            <th>分级燃烧</th>
                            <th><RadioGroup options={options2} onChange={this.onChange2} value={this.state.value2}/>
                            </th>
                        </tr>
                        <tr>
                            <th>排放浓度，mg/m3</th>
                            <td><input value={paifang[8]} onChange={event => {this.handlechange7(event,8)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[9]} onChange={event => {this.handlechange7(event,9)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[10]} onChange={event => {this.handlechange7(event,10)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[11]} onChange={event => {this.handlechange7(event,11)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[12]} onChange={event => {this.handlechange7(event,12)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[13]} onChange={event => {this.handlechange7(event,13)}} placeholder="请输入排放量"/></td>
                            <td><input value={paifang[14]} onChange={event => {this.handlechange7(event,14)}} placeholder="请输入排放量"/></td>
                            <th>3</th>
                            <th>1+2</th>
                            <th><RadioGroup options={options3} onChange={this.onChange3} value={this.state.value3}/>
                            </th>
                        </tr>
                        <tr>
                            <th>除尘方式（电/袋)</th>
                            <td><input value={chucheng[0]} onChange={event => {this.handlechange8(event,0)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[1]} onChange={event => {this.handlechange8(event,1)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[2]} onChange={event => {this.handlechange8(event,2)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[3]} onChange={event => {this.handlechange8(event,3)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[4]} onChange={event => {this.handlechange8(event,4)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[5]} onChange={event => {this.handlechange8(event,5)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[6]} onChange={event => {this.handlechange8(event,6)}} placeholder="请输入除尘方式"/></td>
                            <td><input value={chucheng[7]} onChange={event => {this.handlechange8(event,7)}} placeholder="请输入除尘方式"/></td>
                            <th>4</th>
                            <th>其它</th>
                            <th><RadioGroup options={options4} onChange={this.onChange4} value={this.state.value4}/>
                            </th>
                        </tr>
                    </table>
                    <table border="3" className="table4">
                        <tr>
                            <th rowSpan='4'>主要设备</th>
                            <th rowSpan='2'>设备名称</th>
                            <th colSpan='3'>生料磨</th>
                            <th>窑</th>
                            <th colSpan='3'>水泥磨</th>
                        </tr>
                        <tr>
                            <th>粉磨方式</th>
                            <th>规格型号</th>
                            <th>数量</th>
                            <th>规格</th>
                            <th>粉磨方式</th>
                            <th>规格型号</th>
                            <th>数量</th>
                        </tr>
                        <tr>
                            <th rowSpan='2'>设备情况</th>
                            <td><input value={qingkuang[0]} onChange={event => {this.handlechange9(event,0)}} placeholder="请输入设备情况"/></td>
                            <td><input value={qingkuang[1]} onChange={event => {this.handlechange9(event,1)}} placeholder="请输入设备情况"/></td>
                            <td><input value={qingkuang[2]} onChange={event => {this.handlechange9(event,2)}} placeholder="请输入设备情况"/></td>
                            <td><input value={qingkuang[3]} onChange={event => {this.handlechange9(event,3)}} placeholder="请输入设备情况"/></td>
                            <td><input value={qingkuang[4]} onChange={event => {this.handlechange9(event,4)}} placeholder="请输入设备情况"/></td>
                            <td><input value={qingkuang[5]} onChange={event => {this.handlechange9(event,5)}} placeholder="请输入设备情况"/></td>
                            <td><input value={qingkuang[6]} onChange={event => {this.handlechange9(event,6)}} placeholder="请输入设备情况"/></td>
                            <td rowSpan='2'><input value={qingkuang[7]} onChange={event => {this.handlechange9(event,7)}} placeholder="请输入设备情况"/></td>
                        </tr>
                    </table>
                </div>
                <p>*备注：若无该数据计算值，可空缺。</p>
                <div id="dongzuo" style={{float: 'right', marginTop: -20}}>
                    {/*<form id="myform" action="test.php" method="post">*/}
                    {/*<input id="JSONText" name="jsontext" type="text" value="" />*/}
                    {/*</form>*/}
                    <Button type="submit" id="save-cookie"
                            style={{marginRight: 10, color: 'white', backgroundColor: '#507dff'}}>暂存</Button>
                    <Button htmlType="submit" id="save"  style={{color: 'white', backgroundColor: '#507dff'}}>提交</Button>
                    {/*<input type="submit" value="Submit"/>*/}
                    <button onClick={this.buttonFunc}>测试</button>
                </div>
            </form>
        )
    }
}
